<template>
  <div class="big-box">
      <div class="order">
          <div class="order-box"><p>暂无订单2</p></div>
      </div>
      <div class="oftenbuy">
        <div class="buy-box">
            <p class="title">推荐 · <span>RECOMMEND</span></p>
            <ul>
                <li v-for="(v,i) in this.$store.state.allorder.all" :key="i">
                    <router-link to="">
                        <img :src="v.img" alt="" class="big-img">
                        <h3>{{v.bytitle|oftenbuy}}</h3>
                        <span class="lei">{{v.type}}</span>
                        <p>
                            <span>￥ <i>{{v.price}}</i><b>/盒</b></span>
                            <span> <img src="/image/Mine/bgw.png" alt=""> </span>
                        </p>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    mounted(){
        this.$store.dispatch("axiosall",{url:"/allorder/all"})
    },
    filters:{
        oftenbuy(val){
            if(val.length>=11){
                return val.substr(0,10)+"..."
            }else{
                return val
            }
        }
    }
}
</script>

<style scoped>
.big-box{
    background-color: #f2f2f2;
}
.order{
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 1.1rem;
}
.order .order-box{
    width: 93%;
    height: 1.2rem;
    border-radius: 0.08rem;
    background-color: #ffffff;
}
.order .order-box p{
    text-align: center;
    font-size: 0.30rem;
    line-height: 1.2rem;
}
.oftenbuy{
    margin-top: 0.08rem;
    width: 100%;
    display: flex;
    justify-content: center;
}
.oftenbuy .buy-box{
    width: 93%;
}
.oftenbuy .buy-box p:nth-child(1){
    margin-top: 0.08rem;
    text-align: center;
}
.oftenbuy .buy-box p:nth-child(1) span{
    color: #3599d4;
}
.oftenbuy .buy-box ul{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.oftenbuy .buy-box ul li{
    border-radius: 0.08rem;
    margin-top: 0.08rem;
    width: 48.50%;
    background-color: #ffffff;
}
.oftenbuy .buy-box ul li .router-link-active{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.oftenbuy .buy-box ul li .router-link-active .big-img{
    width: 100%;
    margin: 0.1rem 0;
}
.oftenbuy .buy-box ul li .router-link-active h3{
    margin-left: 0.07rem;
    font-weight: normal;
    color: #343434;
}
.oftenbuy .buy-box ul li .router-link-active .lei{
    margin-left: 0.07rem;
    color: #979797;
}
.oftenbuy .buy-box ul li .router-link-active p{
    margin: 0.1rem 0.07rem 0.08rem;
    display: flex;
    justify-content: space-between;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(1){
    color: #e44e35;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(1) i{
    font-size: 0.18rem;
    font-style: normal;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(1) b{
    font-size: 0.11rem;
    font-weight: normal;
    color: #cdcdcd;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(2){
    background-color: #0caff4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.25rem;
    height: 0.25rem;
}
.oftenbuy .buy-box ul li .router-link-active p span:nth-child(2) img{
    width: 0.2rem;
    height: 0.2rem;
}
</style>